<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style>
    /*重新设置样式*/
    .form-control {
        width: 196px !important;
        height: 34px !important;
        padding: 10px !important;
    }
</style>
<body class="hold-transition skin-blue sidebar-mini">


<!--编辑模态框-->
<div class="modal fade" id="modal-select-purchase">
    <div class="modal-dialog" style="width: 350px;">
        <div class="modal-content">
            <div class="modal-header" style="padding-bottom: 0px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">出入库冲单</h4>
            </div>
            <div class="modal-body" style="padding-bottom: 5px;padding-top: 0px;">
                <div class="row">
                    <div class="col-xs-12">
                        <form id="editForm">
                            <div class="box">
                                <div class="box-header" style="padding-bottom: 0px;"></div>
                                <div class="box-body" style="padding-top: 0px;padding-bottom: 0px;">
                                    <div class="row">

                                        <div hidden>
                                            <input hidden name="ityIds">
                                        </div>
                                        <div class="form-group">
                                            <label style="width: 60px">项目名称</label>
                                            <input type="text" name="ityProName" maxlength="255"/>
                                        </div>
                                        <div class="form-group">
                                            <label style="width: 60px">区位</label>
                                            <input type="text" name="ityPosition" maxlength="255"/>
                                        </div>
                                        <div class="form-group">
                                            <label style="width: 60px">备注</label>
                                            <input type="text" name="ityRemark" maxlength="255"/>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="padding-top: 5px;">
                <button id="btn-submit" type="button" class="btn btn-success">保存</button>
                <button id="btn-cancel" type="button" class="btn btn-warning" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>

</div>
<section class="content-header">
    <h1>出入库冲单</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" class="form-horizontal">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label class="control-label" style="text-align: right">项目编号</label>
                                    <label class="control-label">
                                        <input type="text" name="odaProCode"
                                               class="form-control"
                                               placeholder="请输入项目编号"/>
                                    </label>
                                </div>
                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label class="control-label" style="text-align: right">物料描述</label>
                                    <label class="control-label">
                                        <input type="text" name="odaMatDesc"
                                               class="form-control"
                                               placeholder="请输入物料描述"/>
                                    </label>
                                </div>
                                <!--<div class="form-group" style="margin:0px 5px 5px 5px">-->
                                    <!--<label class="control-label" style="text-align: right">SAP物料编号</label>-->
                                    <!--<label class="control-label">-->
                                        <!--<input type="text" name="odaSapCode"-->
                                               <!--class="form-control"-->
                                               <!--placeholder="请输入SAP物料编号"/>-->
                                    <!--</label>-->
                                <!--</div>-->
                                <!--<div class="form-group" style="margin:0px 5px 5px 5px">-->
                                    <!--<label class="control-label" style="text-align: right">跟踪号</label>-->
                                    <!--<label class="control-label">-->
                                        <!--<input type="text" name="odaTrackCode"-->
                                               <!--class="form-control"-->
                                               <!--placeholder="请输入跟踪号"/>-->
                                    <!--</label>-->
                                <!--</div>-->

                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label class="control-label" style="text-align: right">单据编号</label>
                                    <label class="control-label">
                                        <input type="text" name="odrCode"
                                               class="form-control"
                                               placeholder="请输入单据编号"/>
                                    </label>
                                </div>
                                <!--<div class="form-group" style="margin:0px 5px 5px 5px">-->
                                    <!--<label class="control-label" style="text-align: right">调拨单号</label>-->
                                    <!--<label class="control-label">-->
                                        <!--<input type="text" name="odrRepId"-->
                                               <!--class="form-control"-->
                                               <!--placeholder="请输入调拨单号"/>-->
                                    <!--</label>-->
                                <!--</div>-->
                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label class="control-label" style="text-align: right">制单人</label>
                                    <label class="control-label">
                                        <input type="text" name="odrMakePerson"
                                               class="form-control"
                                               placeholder="请输入制单人信息"/>
                                    </label>
                                </div>
                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label class="control-label" style="text-align: right">领料人</label>
                                    <label class="control-label">
                                        <input type="text" name="odrTakePerson"
                                               class="form-control"
                                               placeholder="请输入领料人信息"/>
                                    </label>
                                </div>
                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label class="control-label" style="text-align: right">供应商</label>
                                    <input type="text" name="supplier"
                                           class="form-control"
                                           placeholder="请输入供应商"/>
                                </div>
                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label class="control-label" style="text-align: right">合同编号</label>
                                    <input type="text" name="contractNo"
                                           class="form-control"
                                           placeholder="请输入合同编号"/>
                                </div>
                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label class="control-label" style="text-align: right">区位</label>
                                    <label class="control-label">
                                        <input type="text" name="ityPosition"
                                               class="form-control"
                                               placeholder="请输入区位"/>
                                    </label>
                                </div>
                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label>仓库</label>
                                    <select id="ityWhiId" class="form-control select" name="ityWhiId"
                                            style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width: auto!important;">
                                    </select>
                                </div>
                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label class="control-label" style="text-align: right">
                                        出入库类别
                                    </label>
                                    <label class="control-label">
                                        <select name="odrType"
                                                style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width:80px!important;"
                                                class="form-control select">
                                            <option value="" selected="selected">全部</option>
                                            <option value="1">入库</option>
                                            <option value="2">出库</option>
                                        </select>
                                    </label>
                                </div>
                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label class="control-label" style="text-align: right">单据类型</label>
                                    <label class="control-label">
                                        <select name="billType" class="form-control select"
                                                style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width:80px!important;">
                                            <option value="1">采购入库</option>
                                            <option value="2">领料出库</option>
                                            <option value="5">车间返料</option>
                                            <option value="7">项目完结剩余</option>
                                            <option value="0" selected="selected">全部</option>
                                        </select>
                                    </label>
                                </div>

                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label class="control-label" style="text-align: right">红冲过滤</label>
                                    <label class="control-label">
                                        <select id="reverseFilter" class="form-control select" name="reverseFilter"
                                                style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width:80px!important;">
                                            <option selected="selected" value="0">未冲单</option>
                                            <option value="1">已冲单</option>
                                            <option value="">全部</option>
                                        </select>
                                    </label>
                                </div>
                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label class="control-label" style="text-align: right">
                                        制单日期范围
                                    </label>
                                    <label class="control-label">
                                        <input name="beginDate" type="text" class="form-control datepicker"
                                               style="width:100px!important;text-align: center!important;"
                                               readonly="readonly"/>-
                                        <input name="endDate" type="text" class="form-control datepicker"
                                               style="width:100px!important;text-align: center!important;"
                                               readonly="readonly"/>
                                    </label>
                                </div>
                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <button type="button" class="btn btn-success" id="btn-search">搜索</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="row" id="toolbar">
                    <div class="form-inline">
                        <button shiro:hasAnyPermissions="jiagong:storageoffset:edit" type="button"
                                class="btn btn-danger" onclick="batchReverse()"
                                id="btn-reverse-select"
                                style="margin-right: 50px">批量红冲
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <table id="inventoryQueryTable" class="table table-bordered " width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>

<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var bTable;

    /**
     *@FunctionName: findWarehouseList
     *@Description: 获取仓库列表
     *@DesignIdea: 因为此页面是外购件页面，所以获取外购件仓库列表。
     *@Author: 徐一贺
     *@CreateDate: 2020/5/9 16:10
     *@Phone: 18241927380
     *@Param: []
     *@Version: v 1.0.0
     */
    function findWarehouseList() {
        js.ajax({
            url: ctx + 'jiaGongInto/listLibrary',
            type: 'post',
            traditional: true,            // 阻止深度序列化， 使参数可以使用数组
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            data: {},
            async: true,                // 异步执行
            success: function (result) {
                if (result.type === web_status.SUCCESS) {

                    $("#queryForm [name='ityWhiId']").empty();
                    $("#queryForm [name='ityWhiId']").append('<option selected="selected" style="vertical-align: middle;text-align: center" value="">全部</option>');
                    for (var i = 0; i < result.data.rows.length; i++) {
                        $("#queryForm [name='ityWhiId']").append('<option style="vertical-align: middle;text-align: center" value="' + result.data.rows[i].whiId + '">' + result.data.rows[i].whiName + '</option>');
                    }
                } else {
                    js.modal.warning(result.msg);
                }
            },
            error: function () {
                js.modal.fail();
            }
        })
    }

    /**
     *@FunctionName: search
     *@Description: 查询
     *@Author: 徐一贺
     *@CreateDate: 2020/4/10 16:10
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function search() {

        js.table.search(bTable);
    }


    /**
     *@FunctionName: batchReverse
     *@Description: 批量红冲
     *@Author: 徐一贺
     *@CreateDate: 2020/4/10 20:53
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function batchReverse() {
        var odaIds = "";
        $('input[name="cb_inventory"]').each(function (index, data) {
            if ($(this).prop("checked")) {
                odaIds += $(this).attr("data") + ",";
            }
        });
        odaIds = odaIds.substring(0, odaIds.length - 1);
        if (odaIds.length > 0) {
            reverseOrder(odaIds, 'batch');
        } else {
            js.modal.warning("请选择要红冲的明细。");
        }
    }


    function checkOrderType(orderType, odaIds, type, obj) {
        reverseOrder(odaIds, type);
    }

    /**
     *@FunctionName:reverseOrder
     *@Description: 红冲或批量红冲
     *@Author: 徐一贺
     *@CreateDate: 2020/4/10 16:09
     *@Phone: 18241927380
     *@Param: odaIds id组合
     *@Version: 1.0.0
     */
    function reverseOrder(odaIds, type) {
        js.modal.confirm("确定冲单吗？", function () {
            $("#btn-reverse-select").hide();
            $.post(
                ctx + 'jiaGongOffset/reverseOrder',
                {
                    odaIds: odaIds,
                    type: type
                },
                function (result) {
                    if (result.type == 'SUCCESS') {
                        search();
                        js.modal.success("红冲成功！");
                    } else {
                        js.modal.fail(result.msg);
                    }
                    $("#btn-reverse-select").show();
                },
                'json'
            );
        })
    }

    /**
     *@FunctionName:
     *@Description: 请填写方法描述
     *@Author: 徐一贺
     *@CreateDate: 2020/4/7 19:36
     *@Phone: 18241927380
     *@Param:
     *@Return:
     *@Version:
     */
    function openEditPanel(row, ids) {
        $("#editForm input[name='ityIds']").val(ids);

        if (row != undefined) {
            $("#editForm input[name='ityProName']").val(row.ityProName);
            $("#editForm input[name='ityPosition']").val(row.ityPosition);
            $("#editForm input[name='ityRemark']").val(row.ityRemark);
        } else {
            $("#editForm input[name='ityProName']").val("");
            $("#editForm input[name='ityPosition']").val("");
            $("#editForm input[name='ityRemark']").val("");
        }
        js.modal.open("modal-select-purchase");
    }

    /**
     *@FunctionName: selectAll
     *@Description: 全选
     *@Author: 徐一贺
     *@CreateDate: 2020/4/8 15:20
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function selectAll(obj) {
        if ($(obj).prop("checked")) {
            $('input[name="cb_inventory"]').prop("checked", true);
        }
        if ($(obj).prop("checked") == false) {
            $('input[name="cb_inventory"]').prop("checked", false);
        }
    }


    $(function () {

        $("title").html($("title").html() + " —— 外购件单据冲单");
        /**批量修改**/
        $("#btn-editItems").on('click', function () {
            var ityIds = "";
            $('input[name="cb_inventory"]').each(function (index, data) {
                if ($(this).prop("checked")) {
                    ityIds += $(this).attr("data") + ",";
                }
            });
            ityIds = ityIds.substring(0, ityIds.length - 1);
            if (ityIds == "") {
                js.modal.alert("请选择要修改的数据！");
                return
            }
            openEditPanel(undefined, ityIds);
        });
        findWarehouseList();
        //加载列表数据
        bTable = js.table.init({
            id: 'inventoryQueryTable',
            url: ctx + "jiaGongOffset/list",
            showColumns: true,
            showExport: false,
            pageSize: 300,
            onLoadSuccess: function () {
                $('#inventoryQueryTable thead th').each(function () {
                    $(this).width(Math.floor($(this).width()));
                });
                $('#inventoryQueryTable tbody tr:first td').each(function () {
                    $(this).width(Math.floor($(this).width()));
                });
            },
            columns: [
                {
                    title: '<input title="全选" onclick="selectAll(this)" type="checkbox" />',
                    width: '30',
                    field: 'odaId',
                    formatter: function (value, row, index) {
                        var disabledText = "";
                        //红单
                        if (row.odaRedFlag != 0) {
                            return '<label   class="label label-danger">红单</label>';
                        }  else {
                            return '<input  ' + disabledText + ' id="' + 'cb_inventory_' + row.odaId + '" name="cb_inventory" data="' + row.odaId + '"  type="checkbox" />';
                        }
                    }
                },
                {
                    title: '序号', field: 'odaId', width: '50',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: '单据编号', field: 'odrCode', width: '120'},
                {title: '单据类型', field: 'billTypeText', width: '120'},
                // {title: 'SAP物料编号', field: 'odaSapCode'},
                {title: '物料描述', field: 'odaMatDesc', width: '200'},
                {title: '数量', field: 'odaNum'},
                // {title: '跟踪号', field: 'odaTrackCode'},

                {
                    title: '项目编号', field: 'odaProCode', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return value;
                    }
                },
                {
                    title: '项目名称', field: 'odaProName', width: '200', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return value;
                    }
                },
                {title: '供应商', field: 'supplier'},
                {title: '合同编号', field: 'contractNo'},
                {title: '仓库', field: 'ityWhiName'},
                {title: '区位', field: 'ityPosition'},
                {title: '记账日期', field: 'odaBookkeepingDate', width: '100'},
                {title: '制单时间', field: 'odrMakeDate'},
                {title: '制单人', field: 'name', width: '70'},
                {
                    title: '领料人', field: 'odrTakePerson', width: '70', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return '<p  style="word-wrap: break-word;width: 60px">' + value + '</p>';
                    }
                },
                {
                    title: '操作', field: 'odaId', width: '80',
                    formatter: function (value, row, index) {
                        var htmlText = "";
                        let orderType = '';
                        if (row.odaRedFlag != 0) {
                            orderType = "红单";
                        }
                        //非红单
                        if (row.odaRedFlag == 0) {
                            if (hasP("jiagong:storageoffset:edit")) {
                                htmlText = '<button onclick="checkOrderType(\'' + orderType + '\',' + value + ',\'single\',this)" class="btn btn-sm btn-danger btn-xs">红冲</button>';
                            }
                        }
                        return htmlText;
                    }
                }
            ]
        });
        /**
         * 表格搜索
         */
        $("#btn-search").on('click', function () {
            js.table.search(bTable);
        });
    });
</script>
</body>
</html>
